<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { getSubmitDetailApi } from '@/api/problem/submit';
import { Message } from '@arco-design/web-vue'; // 假设使用 Arco Design 的 Message 组件
import MonacoEditor from '@/components/MonacoEditor.vue'; // 导入 MonacoEditor 组件

const route = useRoute();
const submissionDetail = ref<API.Problem.SubmitVo | null>(null);
const isLoading = ref(true);

// 将后端语言名称映射到 Monaco Editor 支持的语言标识符
const editorLanguage = computed(() => {
  if (!submissionDetail.value?.language) return 'plaintext';
  const lang = submissionDetail.value.language.toLowerCase();
  // 这里可以根据需要添加更多语言映射
  if (lang === 'java') return 'java';
  if (lang === 'python') return 'python';
  if (lang === 'c++') return 'cpp';
  if (lang === 'cpp') return 'cpp';
  if (lang === 'go') return 'go';
  if (lang === 'javascript') return 'javascript';
  // ... 其他语言
  return 'plaintext'; // 默认为纯文本
});

const fetchSubmissionDetail = async () => {
  isLoading.value = true;
  const id = route.params.submissionId;
  if (!id) {
    Message.error('提交ID不存在');
    isLoading.value = false;
    return;
  }

  // 从路由参数获取的id可能是字符串，需要转换为数字
  const submissionIdNumber = Number(id);
  if (isNaN(submissionIdNumber)) {
    Message.error('无效的提交ID格式');
    isLoading.value = false;
    return;
  }

  try {
    const res = await getSubmitDetailApi(submissionIdNumber);
    if (res.code === 0 && res.data) {
      submissionDetail.value = res.data;
    } else {
      Message.error(res.message || '获取提交详情失败');
    }
  } catch (error: any) {
    Message.error(error.message || '获取提交详情时发生错误');
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  fetchSubmissionDetail();
});
</script>

<template>
  <div class="submission-detail-page">
    <a-spin :loading="isLoading" tip="加载中..." style="width: 100%;">
      <a-card v-if="submissionDetail" title="提交详情">
        <a-descriptions :column="2" bordered>
         
          <a-descriptions-item label="提交语言">
            <a-tag>{{ submissionDetail.language }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="判题状态">
            <a-tag :color="submissionDetail.status === 2 ? 'green' : (submissionDetail.status === 3 ? 'red' : 'orange')">
              {{ submissionDetail.status === 0 ? '等待判题' : 
                 submissionDetail.status === 1 ? '判题中' :
                 submissionDetail.status === 2 ? '成功' :
                 submissionDetail.status === 3 ? '失败' : '未知状态' }}
            </a-tag>
          </a-descriptions-item>
          
          <template v-if="submissionDetail.judgeInfo">
            <a-descriptions-item label="执行用时">
              {{ submissionDetail.judgeInfo.time }} ms
            </a-descriptions-item>
            <a-descriptions-item label="消耗内存">
              {{ submissionDetail.judgeInfo.memory }} KB
            </a-descriptions-item>
             <a-descriptions-item label="判题信息" :span="2" v-if="submissionDetail.judgeInfo.message && submissionDetail.status === 3">
              <a-alert type="error">
                {{ submissionDetail.judgeInfo.message }}
              </a-alert>
            </a-descriptions-item>
          </template>
        </a-descriptions>

        <a-divider>提交代码</a-divider>
        <a-card title="代码" style="margin-top: 20px;">
          <MonacoEditor 
            v-if="submissionDetail.code" 
            :modelValue="submissionDetail.code" 
            :language="editorLanguage" 
            readOnly 
            theme="vs" 
            :options="{ minimap: { enabled: false } }"
            style="min-height: 300px;" 
          />
          <a-empty v-else description="代码为空" />
        </a-card>
      </a-card>
      <a-empty v-else-if="!isLoading" description="无法加载提交详情" />
    </a-spin>
  </div>
</template>

<style scoped>
.submission-detail-page {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}
:deep(.arco-descriptions-item-label-block) {
  font-weight: bold;
}
/* 移除 pre 和 code 的特定样式，因为 MonacoEditor 会有自己的样式 */
</style> 